<table class="table table-hover" id="treeTable1">
	<thead>
		<tr>
			<th>商品类目名称</th>
			<th>级别</th>
			<th>排序</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<volist name="productClassLists" id="vo">
			<tr id="{$vo.id}" pId="{$vo.pid}" hasChild="true">
				<td>{$vo.name}</td>
				<td>{$vo.level}</td>
				<td>{$vo.sort}</td>
				<td>
					<a class="btn btn-info btn-xs actionds" data-action-id="{$vo.id}" data-action-txt="恢复中……" data-action-url="__CONTROLLER__/restorePost">恢复</a>
					<a class="btn btn-danger btn-xs actionds" data-action-id="{$vo.id}" data-action-txt="移除中……" data-actioin-delete="yes" data-action-url="__CONTROLLER__/deletePost">彻底删除</a>
				</td>
			</tr>
		</volist>
	</tbody>
</table>
<div class="pagination">{$pagination}</div>
<script type="text/javascript" src="__PUBLIC__/Style/Common/treeTable/jquery.treeTable.js"></script>
<script type="text/javascript">
	$(function(){
	    var option = {
	        theme:'default',
	        expandLevel : 1,
	        beforeExpand : function($treeTable, id) {
	            //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
	           if ($('.' + id, $treeTable).length) { return; }
	            $.post("__CONTROLLER__/ajaxPost",{"id": id}, function( data ){
	            	
	            	if(!data.extra){return};
	            	for(var i=0; i<data.extra.length; i++) {
	            		var html = "<tr id="+data.extra[i].id+" pId="+data.extra[i].pid+" hasChild='true'>"
		        				+"<td>"+data.extra[i].name+"</td>"
		        				+"<td>"+data.extra[i].level+"</td>"
		        				+"<td>"+data.extra[i].sort+"</td>"
		        				+"<td><a class='btn btn-primary btn-xs' href='__CONTROLLER__/add/id/"+data.extra[i].id+"/pid/"+data.extra[i].pid+"'>增加子栏目</a> "
		        				+"<a class='btn btn-primary btn-xs' href='__CONTROLLER__/modify/id/"+data.extra[i].id+"'>修改</a> "
		        				+"<a class='btn btn-danger btn-xs actionds' data-action-id="+data.extra[i].id+" data-action-txt='移除中……' data-action-url='__CONTROLLER__/removePost'>移除</a></td>"
		        				+"</tr>";
        				$treeTable.addChilds(html);
	            	}
	            	
	            })
	            
	        },
	        onSelect : function($treeTable, id) {
	            window.console && console.log('onSelect:' + id);
	            
	        }
	
	    };
	    $('#treeTable1').treeTable(option);
	});
</script>
